<template>
  <div class="page-container">
    <!-- 顶部搜索栏 -->
    <div class="search-header">
      <div class="search-bar" @click="goToSearch">
        <Find class="search-icon" />
        <span class="search-placeholder">搜索商品</span>
      </div>
    </div>

    <div class="category-container">
      <!-- 左侧分类菜单 -->
      <div class="category-menu">
        <div 
          class="category-item"
          v-for="category in categories"
          :key="category.id"
          :class="{ active: selectedCategory === category.id }"
          @click="selectCategory(category.id)"
        >
          {{ category.name }}
        </div>
      </div>

      <!-- 右侧商品列表 -->
      <div class="product-content">
        <div class="subcategory-list" v-if="currentSubcategories.length">
          <div class="subcategory-grid">
            <div 
              class="subcategory-item"
              v-for="subcategory in currentSubcategories"
              :key="subcategory.id"
              @click="selectSubcategory(subcategory.id)"
            >
              <img :src="subcategory.icon" :alt="subcategory.name" />
              <span>{{ subcategory.name }}</span>
            </div>
          </div>
        </div>

        <div class="product-list" v-if="currentProducts.length">
          <div class="product-item" v-for="product in currentProducts" :key="product.id" @click="goToProduct(product.id)">
            <div class="product-image">
              <img :src="product.image" :alt="product.name" />
            </div>
            <div class="product-info">
              <h4 class="product-name">{{ product.name }}</h4>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">
                <span class="current-price">¥{{ product.price }}</span>
                <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
              </div>
              <div class="product-actions">
                <nut-button 
                  type="primary" 
                  size="small"
                  @click.stop="addToCart(product)"
                >
                  加入购物车
                </nut-button>
              </div>
            </div>
          </div>
        </div>

        <div class="empty-state" v-if="!currentProducts.length && !currentSubcategories.length">
          <img src="https://picsum.photos/80/80?random=1" alt="暂无商品" />
          <p>该分类暂无商品</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Find } from '@nutui/icons-vue'
import { useCartStore } from '@/stores/cart'

const route = useRoute()
const router = useRouter()
const cartStore = useCartStore()

// 选中的分类
const selectedCategory = ref(1)

// 分类数据
const categories = ref([
  { id: 1, name: '手机数码' },
  { id: 2, name: '服装鞋包' },
  { id: 3, name: '家居生活' },
  { id: 4, name: '美妆护肤' },
  { id: 5, name: '运动户外' },
  { id: 6, name: '食品生鲜' },
  { id: 7, name: '图书文具' },
  { id: 8, name: '母婴用品' },
  { id: 9, name: '汽车用品' },
  { id: 10, name: '医药保健' }
])

// 子分类数据
const subcategories = ref({
  1: [
    { id: 11, name: '手机', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 12, name: '平板', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 14, name: '耳机', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 13, name: '笔记本', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 15, name: '充电器', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 16, name: '数据线', icon: 'https://picsum.photos/60/60?random=1' }
  ],
  2: [
    { id: 22, name: '女装', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 21, name: '男装', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 23, name: '童装', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 24, name: '内衣', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 25, name: '鞋靴', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 26, name: '箱包', icon: 'https://picsum.photos/60/60?random=1' }
  ],
  3: [
    { id: 31, name: '家具', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 32, name: '家纺', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 33, name: '厨具', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 34, name: '清洁', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 35, name: '收纳', icon: 'https://picsum.photos/60/60?random=1' },
    { id: 36, name: '装饰', icon: 'https://picsum.photos/60/60?random=1' }
  ]
})

// 商品数据
const products = ref({
  11: [
    {
      id: 101,
      name: 'iPhone 15 Pro',
      price: 7999,
      originalPrice: 8999,
      description: '搭载A17 Pro芯片，性能强劲',
      image: 'https://picsum.photos/120/120?random=1'
    },
    {
      id: 102,
      name: '华为 Mate 60',
      price: 6999,
      originalPrice: 7999,
      description: '麒麟芯片，卫星通信',
      image: 'https://picsum.photos/60/60?random=1'
    }
  ],
  12: [
    {
      id: 201,
      name: 'iPad Pro 12.9',
      price: 6799,
      description: 'M2芯片，12.9英寸屏幕',
      image: 'https://picsum.photos/60/60?random=1'
    }
  ],
  21: [
    {
      id: 301,
      name: '男士休闲T恤',
      price: 89,
      description: '纯棉面料，舒适透气',
      image: 'https://picsum.photos/60/60?random=1'
    }
  ]
})

// 当前子分类
const currentSubcategories = computed(() => {
  return subcategories.value[selectedCategory.value] || []
})

// 当前商品
const currentProducts = computed(() => {
  const subcategoryId = route.query.subcategory
  if (subcategoryId) {
    return products.value[subcategoryId] || []
  }
  return []
})

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
  router.push({ path: '/category', query: { category: categoryId } })
}

// 选择子分类
const selectSubcategory = (subcategoryId) => {
  router.push({ path: '/category', query: { category: selectedCategory.value, subcategory: subcategoryId } })
}

// 跳转到搜索页
const goToSearch = () => {
  router.push('/search')
}

// 跳转到商品详情
const goToProduct = (productId) => {
  router.push(`/product-detail/${productId}`)
}

// 添加到购物车
const addToCart = (product) => {
  cartStore.addToCart(product)
  // 显示提示
  showToast('已添加到购物车')
}

// 显示提示
const showToast = (message) => {
  // 这里可以使用NutUI的Toast组件
  console.log(message)
}

onMounted(() => {
  // 从路由参数获取分类ID，支持多种参数名
  const categoryId = parseInt(route.query.category) || 
                    parseInt(route.query.id) || 
                    1
  selectedCategory.value = categoryId
  
  // 如果有分类ID参数，更新URL查询参数
  if (route.query.id && !route.query.category) {
    router.replace({ 
      path: '/category', 
      query: { category: categoryId } 
    })
  }
})
</script>

<style scoped>
.search-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-bar {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.search-icon {
  color: #999;
  font-size: 16px;
}

.search-placeholder {
  color: #999;
  font-size: 14px;
}

.category-container {
  display: flex;
  height: calc(100vh - 120px);
}

.category-menu {
  width: 80px;
  background: #f8f8f8;
  overflow-y: auto;
}

.category-item {
  padding: 16px 12px;
  text-align: center;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: all 0.3s;
}

.category-item:hover {
  background: #f0f0f0;
}

.category-item.active {
  background: white;
  color: #ff4757;
  font-weight: 600;
  position: relative;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #ff4757;
}

.product-content {
  flex: 1;
  background: white;
  overflow-y: auto;
  padding: 16px;
}

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.subcategory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 16px 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.subcategory-item:hover {
  background: #f8f8f8;
}

.subcategory-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.subcategory-item span {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.product-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.product-desc {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.current-price {
  font-size: 18px;
  font-weight: 600;
  color: #ff4757;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-actions {
  display: flex;
  justify-content: flex-end;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state img {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  opacity: 0.5;
}
</style>
